<template>
  <div class="zs-table-page-container" v-loading="loading">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="formData.biProjectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目"
          @change="changeProject()">
          <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
            :value="item.biProjectCode" />
        </el-select>
        <el-date-picker class="zs-space-right-sm" v-model="formData.dataTime" :type="pickerDate" placeholder="日期"
          :clearable="false" :value-format="valueFormat" disabled />
        <el-select v-model="formData.brandName" filterable multiple collapse-tags collapse-tags-tooltip
          class="zs-select-md zs-space-right-sm" placeholder="品牌">
          <el-option v-for="(item, index) in brandList" :key="index" :label="item" :value="item" />
        </el-select>
        <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
          <template #reference>
            <el-button class="zs-btn-square-solid"
              :class="{ 'zs-btn-square-solid-active': formData.buildingname.length > 0 || formData.floorname.length > 0 || formData.unitecode.length > 0 || formData.customername.length > 0 || formData.customertype.length > 0 || formData.contractscode.length > 0 || formData.contractsstatus.length > 0 || formData.leaseStatus.length > 0 || formData.firstTraderelationName.length > 0 || formData.twoTraderelationName.length > 0 || formData.threeTraderelationName.length > 0 }">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </template>
          <template #default>
            <el-select v-model="formData.buildingname" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="楼栋" clearable>
              <el-option v-for="(item, index) in buildList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.floorname" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="楼层" clearable>
              <el-option v-for="(item, index) in floorList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.unitecode" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="单元编号" clearable>
              <el-option v-for="(item, index) in unitList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.customername" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="商户名称" clearable>
              <el-option v-for="(item, index) in customernameList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.customertype" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="商户类型" clearable>
              <el-option v-for="(item, index) in customertypeList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.contractscode" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="合同编号" clearable>
              <el-option v-for="(item, index) in contractscodeList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.contractsstatus" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="合同状态" clearable>
              <el-option v-for="(item, index) in contractsstatusList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.leaseStatus" filterable multiple collapse-tags
              collapse-tags-tooltip :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm"
              placeholder="租赁状态" clearable>
              <el-option v-for="(item, index) in leaseStatusList" :key="index" :label="item" :value="item" />
            </el-select>
            <!-- <el-select v-model="formData.firstTraderelationName" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="一级业态" clearable @change="changeFirst">
              <el-option v-for="(item, index) in oneLevelList" :key="index" :label="item.dicName"
                :value="item.id" />
            </el-select> -->
            <el-select v-model="formData.firstTraderelationName[0]" filterable :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="一级业态" clearable
              @change="changeFirst">
              <el-option v-for="(item, index) in oneLevelList" :key="index" :label="item.dicName" :value="item.id" />
            </el-select>
            <el-select v-model="formData.twoTraderelationName[0]" filterable :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="二级业态" clearable
              @change="changeSecond">
              <el-option v-for="(item, index) in twoLevelList" :key="index" :label="item.dicName" :value="item.id" />
            </el-select>
            <el-select v-model="formData.threeTraderelationName[0]" filterable :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="三级业态" clearable>
              <el-option v-for="(item, index) in threeLevelList" :key="index" :label="item.dicName" :value="item.id" />
            </el-select>
          </template>
        </el-popover>
        <el-button class="zs-btn-plain" @click="getData()">
          查询
        </el-button>
      </span>
      <span class="zs-layout-flex-row">
        <el-button class="zs-btn-plain" @click="handleDownload">
          <el-icon class="el-icon--left">
            <Upload />
          </el-icon>导出
        </el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe">
        <el-table-column label="序号" width="60" :align="'center'">
          <template #default="scope">
            {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="propertyType" label="资产类型" width="100" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="floorname" label="楼层" width="100" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="gatenumber" label="单元编号" min-width="120" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="brandname" label="品牌名称" min-width="150" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="area" label="租赁面积" width="100" :align="'right'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="consigndate" label="签约日期" width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="constartdate" label="合同开始" min-width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="chargestartdate" label="起租日期" min-width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="conenddate" label="合同结束" min-width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="rentperiod" label="租期" min-width="120" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="decorationperiod" label="装修期" min-width="120" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dueDate" label="到期天数" min-width="120" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="customername" label="商户名称" min-width="240" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="customertype" label="商户类型" min-width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="contractscode" label="合同编码" width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="contractsstatus" label="合同状态" min-width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="leaseStatus" label="租赁状态" min-width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="firstFormat" label="一级业态" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="twoFormat" label="二级业态" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="threeFormat" label="三级业态" min-width="200" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积：㎡</div>
      <div class="zs-space-top-sm zs-table-page-pagination">
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
          :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>

  </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/Manage/Business/rentalSituation'
// import { toThousands, dateFormat } from '@/utils/number-util'
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { downloadNewFile } from "@/utils/publicUtils";
// const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let loading = ref(false)

let biProjectCode = ref(route.biProjectCode)
const updateDate = route.updateDate
const tabPermi = route.tabPermi
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')
let formData = reactive({
  biProjectCode: biProjectCode, // 项目
  dataTime: updateDate, // 日期
  brandName: [], // 品牌名称
  buildingname: [], // 楼栋
  floorname: [], // 楼层
  unitecode: [], // 单元编号
  customername: [], // 商户名称
  customertype: [], // 商户类型
  contractscode: [], // 合同编号
  contractsstatus: [], // 合同状态
  leaseStatus: [], // 租赁状态
  firstTraderelationName: [], // 一级业态
  twoTraderelationName: [], // 二级业态
  threeTraderelationName: [], // 三级业态
})
let projectList = ref([]) // 项目列表
let brandList = ref([]) // 品牌列表
let buildList = ref([]) // 楼栋列表
let floorList = ref([]) // 楼层列表
let unitList = ref([]) // 单元编号列表
let customernameList = ref([]) // 商户名称
let customertypeList = ref(['全部', '个人', '公司']) // 商户类型 下拉选
let contractscodeList = ref([]) // 合同编号
let contractsstatusList = ref([]) // 合同状态
let leaseStatusList = ref(['全部', '出租', '起租', '自用', '空置']) // 租赁状态 下拉选
let oneLevelList = ref([]) // 一级业态列表
let twoLevelList = ref([]) // 二级业态列表
let threeLevelList = ref([]) // 三级业态列表

// 获取项目列表
const getPorjectList = () => {
  dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
    if (res.data.code == 200) {
      projectList.value = res.data.data
    }
  })
}
// 获取品牌列表
const getBrandList = () => {
  formData.brandName = []
  detailApi.rentOutBrandDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      brandList.value = res.data.data
    }
  })
}
// 获取楼栋列表
const getBuildList = () => {
  formData.buildingname = []
  detailApi.vacancyBuildingDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      buildList.value = res.data.data
    }
  })
}
// 获取楼层列表
const getFloorList = () => {
  formData.floorname = []
  detailApi.vacancyFloorDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      floorList.value = res.data.data
    }
  })
}
// 获取单元编号
const getUnitList = () => {
  formData.unitecode = []
  detailApi.rentOutUnitDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      unitList.value = res.data.data
    }
  })
}

// 获取商户名称
const getCustomernameList = () => {
  formData.customername = []
  detailApi.rentOutDealerDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      customernameList.value = res.data.data
    }
  })
}

// 获取合同编号
const getContractscodeList = () => {
  formData.contractscode = []
  detailApi.rentOutContractNumberDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      contractscodeList.value = res.data.data
    }
  })
}
// 获取合同状态
const getContractsstatusList = () => {
  formData.contractsstatus = []
  detailApi.rentOutContractStatusDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      contractsstatusList.value = res.data.data
    }
  })
}
// 获取一级业态列表
const getOneLevelDownList = () => {
  dbPublicApi.queryDict({ dicTypes: ["WIN_BIZ_TYPE_LEVEL_1"] }).then((res) => {
    if (res.data.code == 200) {
      oneLevelList.value = res.data.data.WIN_BIZ_TYPE_LEVEL_1
    }
  })
}

const changeFirst = (data) => {
  formData.twoTraderelationName = []
  formData.threeTraderelationName = []
  twoLevelList.value = []
  threeLevelList.value = []
  if (data) {
    dbPublicApi.queryCascadeDict(data).then((res) => {
      if (res.data.code == 200) {
        twoLevelList.value = res.data.data
      }
    })
  }

}
const changeSecond = (data) => {
  formData.threeTraderelationName = []
  threeLevelList.value = []
  if (data) {
    dbPublicApi.queryCascadeDict(data).then((res) => {
      if (res.data.code == 200) {
        threeLevelList.value = res.data.data
      }
    })
  }
}

// 获取二级业态列表
// const getTwoLevelDownList = () => {
//   detailApi.wholeBrandTwoLevelDownApi().then((res) => {
//     if (res.data.code == 200) {
//       twoLevelList.value = res.data.data
//     }
//   })
// }
// // 获取三级业态列表
// const getThreeLevelDownList = () => {
//   detailApi.wholeBrandThreeLevelDownApi().then((res) => {
//     if (res.data.code == 200) {
//       threeLevelList.value = res.data.data
//     }
//   })
// }

// 改变日期组件，重新获取品牌下拉选，并清空品牌
const changeProject = () => {
  getBrandList()
  getBuildList()
  getFloorList()
  getUnitList()
  getCustomernameList()
  getContractscodeList()
  getContractsstatusList()
}

// 分页
const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
  curPageSize.value = val
  getList()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

const tableData = ref([])
const getList = () => {
  tableData.value = []
  detailApi.rentOutListApi({
    pageNo: currentPage.value,
    pageSize: curPageSize.value,
    ...formData
  }).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.childList
      total.value = res.data.data.totalCount
      loading.value = false
    }
  })
}
const getData = () => {
  currentPage.value = 1
  loading.value = true
  getList()
}

const init = () => {
  getData()

  getPorjectList()

  getBrandList()
  getBuildList()
  getFloorList()
  getUnitList()
  getCustomernameList()
  getContractscodeList()
  getContractsstatusList()
  getOneLevelDownList()

}
init()

const handleDownload = async () => {
  const fileName = `出租列表.xls`
  let fileData
  await detailApi.rentOutExportApi(
    {
      pageNo: currentPage.value,
      pageSize: curPageSize.value,
      ...formData
    }
  ).then(res => {
    fileData = res.data
  })
  downloadNewFile(fileData, fileName)
}

</script>


<style scoped lang="scss"></style>
